<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="fn">{{num}}</button>
        <child></child>
    </div>
</body>
<script>
    // 可以通过$emit发布消息给订阅者（$on）.
    // 注意：$emit,$on需要是同一实例下面的方法
    // 发布消息：$emit("消息的名字",参数1，参数2，参数3，...)
    // 订阅消息：$on("消息的名字",function(参数1，参数2，参数3，...){})
    // 订阅一次消息：$once("消息的名字",function(参数1，参数2，参数3，...){})
    // 取消订阅：$off("消息的名字")

    // 组件之间消息传递
    new Vue({
        el:"#app",
        data:{
            num:0
        },
        components:{
            Child:{
                template:(`
                    <button @click="my">点我</button>
                `),
                methods:{
                    my(){
                        this.$emit("one",10,20,30)
                    }
                },
                mounted(){
                    const _this = this;
                    this.$on("one",function(a,b,c){
                        console.log("on",a,b,c,this===_this);
                        this.$off("one");
                    })
                    this.$once("one",(a,b,c)=>{
                        console.log("once",a,b,c,this)
                    })
                }
            }
        },
        methods:{
            fn(){
                // 发布名字为one的消息
                this.$emit("one",1,2,3,4)
            }
        },
        // 相当于React当中的UNSAFE_componentWillMount
        // 挂载之前
        beforeMount(){
            // console.log("beforeMount",document.querySelector("button").innerText)
        },
        // 相当于React当中的componentDidMount
        mounted(){
            // console.log("mounted",document.querySelector("button").innerText,this);// 0
            // 生成一个消息的名字为one的订阅者
            this.$on("one",function(a,b,c,d){
                console.log(a,b,c,d);
            })
            this.$on("one",function(a,b,c,d){
                console.log(a,b,c,d);
            })
        }
    })
</script>
</html>